<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="searchForm.name"
          placeholder="名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>搜索</el-button>
        <el-button type="primary">新增</el-button>
        <el-button type="danger">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData1"
      style="width: 100%; height: 100%"
      row-key="id"
      border
      lazy
      stripe
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="img" label="头像" width="100">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-avatar :src="scope.row.img" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="300">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-tag class="ml-2" type="info" v-for="(item, index) in scope.row.name"> {{item}} </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="emil" label="邮箱" width="200" />
      <el-table-column prop="number" label="手机号" width="200" />
      <el-table-column prop="statu" label="状态" width="200">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-tag v-if="scope.row.statu === 1" type="success">正常</el-tag>
            <el-tag v-if="scope.row.statu === 0">禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="data" label="创建时间" width="200" />

      <el-table-column prop="icon" label="操作" width="250">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-button type="text">分配角色</el-button>
            <el-divider direction="vertical" />
            <el-button type="text">重置密码</el-button>
            <el-divider direction="vertical" />
            <el-button type="text">编辑</el-button>
            <el-popconfirm title="你确定要删除吗?">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>

            <!-- <el-tag class="ml-2" type="info">Tag 2</el-tag> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      v-model:currentPage="currentPage3"
      v-model:page-size="pageSize3"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const currentPage3 = ref(5);
    const pageSize3 = ref(100);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };

    const searchForm = reactive({
      name: "",
    });
    const tableData1 = [
      {
        id: 1,
        name: ["普通管理员", "超级管理"],
        img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        emil: "2423xxx@qq.com",
        number: "182xxx468",
        statu: 1,
        data: "2022-5-2T22:13:53",
      },
      {
        id: 2,
        name: ["普通管理员", "超级管理"],
        img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        emil: "2423xxx@qq.com",
        number: "182xxx468",
        statu: 0,
        data: "2022-5-2T22:13:53",
      },
      {
        id: 3,
        name: ["普通管理员", "不正常用户"],
        img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        emil: "2423xxx@qq.com",
        number: "182xxx468",
        statu: 1,
        data: "2022-5-2T22:13:53",
      },
      {
        id: 4,
        name: ["普通管理员", "正常用户"],
        img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        emil: "2423xxx@qq.com",
        number: "182xxx468",
        statu: 0,
        data: "2022-5-2T22:13:53",
      },
    ];

    return {
      searchForm,
      tableData1,
      currentPage3,
      pageSize3,
      handleSizeChange,
    };
  },
});
</script>



<style>
</style>